<template>
	<view class="container">
		<view>
			<u-loading-page :loading="loading"></u-loading-page>
		</view>

		<!-- 取书方式弹窗 -->
		<view>
			<u-popup :show="show" mode="bottom" :round="10" closeable @close="TurnOff">
				<view class="popup-container">
					<text class="popup-title">请选择取书方式</text>
					<view class="popup-options">
						<view class="popup-option" @click="confirmOrder('1')">
							<u-icon name="home" color="#007AFF" size="20"></u-icon>
							<text class="option-text">配送到家</text>
							<u-icon name="arrow-right" color="#999" size="16"></u-icon>
						</view>
						<view class="popup-option" @click="confirmOrder('2')">
							<u-icon name="map" color="#007AFF" size="20"></u-icon>
							<text class="option-text">到店自取</text>
							<u-icon name="arrow-right" color="#999" size="16"></u-icon>
						</view>
					</view>
					<view class="popup-cancel" @click="TurnOff">
						<text class="cancel-text">取消</text>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 编辑按钮 -->
		<view v-if="constant === '1' && goodsList.length > 0" class="edit-header">
			<view class="edit-btn-container" @click="toggleEditMode">
				<u-icon :name="isEditMode ? 'checkmark' : 'edit-pen'" :color="isEditMode ? '#52c41a' : '#007AFF'"
					size="16"></u-icon>
				<text class="edit-btn-text">{{ isEditMode ? '完成' : '编辑商品' }}</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<view v-if="constant === '1'" class="content">
			<!-- 空状态 -->
			<view v-if="goodsList.length === 0" class="empty-state">
				<image src="https://www.taotaohomecraft.press/prod-api/profile/non-shopping.png" class="empty-image" />
				<text class="empty-title">购物车空空如也</text>
				<text class="empty-desc">快去逛逛吧，发现更多好物</text>
				<u-button class="shopping-btn" type="primary" text="去购物" shape="circle" @click="handleChangeBook"
					color="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"></u-button>
			</view>

			<!-- 商品列表 -->
			<view v-if="goodsList.length > 0" class="goods-list">
				<view class="goods-item" v-for="(goods, index) in goodsList" :key="goods.id"
					:class="{'edit-mode': isEditMode}">
					<view class="goods-content">
						<!-- 选择框 -->
						<view class="checkbox-container">
							<u-checkbox-group v-if="isEditMode" @change="handleEditSelect(goods.id)">
								<u-checkbox v-model="goods.editChecked" :value="goods.id" shape="circle"
									activeColor="#007AFF" :customStyle="{marginRight: '12px'}"></u-checkbox>
							</u-checkbox-group>
							<u-checkbox-group v-else @change="handleGoodsSelect(goods.id)">
								<u-checkbox v-model="goods.checked" :value="goods.id" shape="circle"
									activeColor="#007AFF" :disabled="goods.disabled"
									:customStyle="{marginRight: '12px'}"></u-checkbox>
							</u-checkbox-group>
						</view>

						<!-- 商品图片 -->
						<view class="goods-image-container" @click="changeGoodsDetail(goods.id)">
							<image v-if="goods.photo" class="goods-image" :src="goods.photo" mode="aspectFill"></image>
							<view v-else class="goods-image-placeholder">
								<u-icon name="photo" color="#ccc" size="24"></u-icon>
								<text class="placeholder-text">暂无图片</text>
							</view>
							<view v-if="goods.buyNum > 1" class="quantity-badge">
								<text class="quantity-text">{{ goods.buyNum }}</text>
							</view>
						</view>

						<!-- 商品信息 -->
						<view class="goods-info">
							<text class="goods-name">{{ goods.name }}</text>
							<view class="goods-bottom">
								<text class="goods-price">¥{{ goods.price }}</text>
								<u-number-box v-model="goods.buyNum" @change="changeBuyNum(goods)" color="#333"
									bgColor="#f8f9fa" buttonSize="28" inputWidth="60" min="1" integer
									:disabled="isEditMode"></u-number-box>
							</view>
						</view>
					</view>

					<!-- 编辑模式指示器 -->
					<view v-if="isEditMode && goods.editChecked" class="edit-indicator">
						<u-icon name="checkmark-circle-fill" color="#52c41a" size="20"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 书架页面 -->
		<view v-if="constant == '2'" class="content">
			<!-- 借阅统计 -->
			<view class="borrow-stats">
				<view class="stats-content">
					<u-icon name="book" color="#fff" size="18"></u-icon>
					<text class="stats-text">已借阅{{ borrowNum }}本，还可以借阅{{ 3 - borrowNum }}本</text>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-if="bookList.length === 0" class="empty-state">
				<image src="https://www.taotaohomecraft.press/prod-api/profile/non-shopping.png" class="empty-image" />
				<text class="empty-title">书架空空如也</text>
				<text class="empty-desc">快去选书吧，丰富你的阅读生活</text>
				<u-button class="shopping-btn" type="primary" text="去选书" shape="circle" @click="handleChangeBook"
					color="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"></u-button>
			</view>

			<!-- 图书列表 -->
			<view v-if="bookList.length > 0" class="book-list">
				<view class="book-item" v-for="(book, index) in bookList" :key="book.id">
					<view class="book-content">
						<!-- 选择框 -->
						<view class="checkbox-container">
							<u-checkbox-group @change="handleSelect(book.id)">
								<u-checkbox v-model="book.checked" :value="book.id" shape="circle" activeColor="#FFA500"
									:disabled="book.disabled" :customStyle="{marginRight: '12px'}"></u-checkbox>
							</u-checkbox-group>
						</view>

						<!-- 图书封面 -->
						<view class="book-cover-container" @click="changeBookDetail(book.id)">
							<view v-if="!book.photo" class="book-cover-placeholder">
								<u-icon name="book" color="#999" size="20"></u-icon>
								<text class="placeholder-text">暂无封面</text>
							</view>
							<u--image v-else width="70px" height="90px" :src="book.photo" radius="8"
								mode="aspectFill"></u--image>
						</view>

						<!-- 图书信息 -->
						<view class="book-info" @click="changeBookDetail(book.id)">
							<text class="book-title">{{ book.name }}</text>
							<text class="book-author">作者：{{ book.author }}</text>
							<text class="book-press">出版社：{{ book.press }}</text>
						</view>

						<!-- 操作按钮 -->
						<view class="book-actions">
							<u-button type="primary" text="移除" size="mini" shape="circle"
								color="linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%)" @click="delBook(book.id)">
								<u-icon name="trash" color="#fff" size="12"
									:customStyle="{marginRight: '4px'}"></u-icon>
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<!-- 商品购买 -->
		<view v-if="constant === '1' && !isEditMode" class="footer-actions">
			<view class="footer-left">
				<text class="total-label">合计：</text>
				<text class="total-price">¥{{ totalPrice }}</text>
			</view>
			<view class="footer-right">
				<u-button type="primary" shape="circle" text="立即购买" @click="handleCheckout"
					color="linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%)"></u-button>
			</view>
		</view>

		<!-- 编辑模式删除 -->
		<view v-if="constant === '1' && isEditMode" class="footer-actions edit-mode">
			<view class="footer-left">
				<text class="selected-count">已选择 {{ selectedEditCount }} 件商品</text>
			</view>
			<view class="footer-right">
				<u-button type="primary" shape="circle" text="删除选中" @click="deleteSelectedGoods"
					:disabled="selectedEditCount === 0"
					color="linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%)"></u-button>
			</view>
		</view>

		<!-- 借阅操作 -->
		<view v-if="constant === '2'" class="footer-actions">
			<view class="footer-left">
				<text class="selected-count">已选择 {{ selectList.length }} 本</text>
			</view>
			<view class="footer-right">
				<u-button type="primary" shape="circle" text="立即借阅" @click="handleCheckout"
					color="linear-gradient(135deg, #FFA500 0%, #ff8c00 100%)"></u-button>
			</view>
		</view>

		<!-- 移除确认弹窗 -->
		<view>
			<u-modal :show="show6" title="确认移除" content="是否将该图书从书架中移除？" showCancelButton confirmColor="#ff6b6b"
				@confirm="confirmremoveBookShelf" @cancel="cancelShow6" @close="cancelShow6"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		removeBookShelf,
		shoppingList
	} from '@/api/book';
	import {
		goodsShoppingList,
		updateShoppingBuyNum,
		deleteShoppingGoods
	} from '@/api/goods'
	import {
		checkBorrowNum
	}
	from '@/api/order';
	import config from '@/config';
	import {
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import constant from '@/utils/constant'
	export default {
		data() {
			return {
				loading: false,
				isEditMode: false,
				editSelectList: [],
				orderInfo: {
					bookList: [],
					goodsList: [],
					addressInfo: {},
					type: ''
				},
				bookId: 0,
				show6: false,
				show: false,
				borrowNum: 0,
				selectAll: 0,
				selectList: [],
				bookList: [],
				goodsList: [],
				constant: '1',
				totalPrice: 0.00
			};
		},
		computed: {
			selectedEditCount() {
				return this.editSelectList.length;
			}
		},
		onShow() {
			console.log('constant.type', constant.type)
			this.constant = constant.type
			if (this.constant == '1') {
				this.getGoodsShoppingList();
			} else {
				this.handleCheckBorrow();
			}
		},
		onPullDownRefresh() {
			console.log("下拉刷新触发");
			setTimeout(() => {
				if (this.constant === '1') {
					this.getGoodsShoppingList();
				} else {
					this.handleCheckBorrow();
				}
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			toggleEditMode() {
				this.isEditMode = !this.isEditMode;
				if (!this.isEditMode) {
					this.goodsList.forEach(item => {
						item.editChecked = false;
					});
					this.editSelectList = [];
				}
			},

			handleEditSelect(id) {
				const selectedGoods = this.goodsList.find((goods) => goods.id === id);
				if (selectedGoods) {
					selectedGoods.editChecked = !selectedGoods.editChecked;

					if (selectedGoods.editChecked) {
						if (!this.editSelectList.find(item => item.id === id)) {
							this.editSelectList.push(selectedGoods);
						}
					} else {
						const index = this.editSelectList.findIndex(item => item.id === id);
						if (index !== -1) {
							this.editSelectList.splice(index, 1);
						}
					}
				}
			},

			async deleteSelectedGoods() {
				if (this.editSelectList.length === 0) {
					uni.showToast({
						title: '请选择要删除的商品',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '提示',
					content: `确定要删除选中的 ${this.editSelectList.length} 件商品吗？`,
					confirmColor: '#ff6b6b',
					success: async (res) => {
						if (res.confirm) {
							this.loading = true;
							try {
								const deletePromises = this.editSelectList.map(goods =>
									deleteShoppingGoods(goods.id)
								);
								await Promise.all(deletePromises);

								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});

								await this.getGoodsShoppingList();
								this.isEditMode = false;
								this.editSelectList = [];

							} catch (error) {
								console.error('删除商品失败:', error);
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								});
							} finally {
								this.loading = false;
							}
						}
					}
				});
			},

			async getGoodsShoppingList() {
				const res = await goodsShoppingList();
				if (res.code == 200) {
					this.goodsList = res.rows.map(item => ({
						...item,
						editChecked: false
					}));
					console.log('goodsList', this.goodsList)
					let totalPrice = 0;
					this.goodsList.forEach((item) => {
						totalPrice += item.price * item.buyNum;
						if (item.photo != null) {
							item.photo = config.baseUrl + item.photo;
						}
					});
					this.totalPrice = totalPrice.toFixed(2);

					this.isEditMode = false;
					this.editSelectList = [];
				}
			},

			async handleCheckBorrow() {
				const res = await checkBorrowNum();
				if (res.code === 200) {
					this.borrowNum = res.data
					this.getList();
				}
			},

			async getList() {
				this.bookId = 0;
				const res = await shoppingList();
				if (res.code == 200) {
					this.bookList = res.rows;
					this.bookList.forEach((item) => {
						if (item.photo != null) {
							item.photo = config.baseUrl + item.photo;
						}
						if (this.borrowNum > 2) {
							item.disabled = true;
						}
					});
				}
			},

			handleGoodsSelect(id) {
				const selectedGoods = this.goodsList.find((goods) => goods.id === id);
				this.selectList.push(selectedGoods);

				if (selectedGoods) {
					selectedGoods.checked = !selectedGoods.checked;

					let totalPrice = 0;
					this.goodsList.forEach((goods) => {
						if (goods.checked) {
							totalPrice += goods.price * goods.buyNum;
						}
					});

					this.totalPrice = totalPrice.toFixed(2);
				}
			},

			handleSelect(id) {
				let oldIndex = this.selectList.findIndex((v) => v.id === id);

				if (oldIndex === -1) {
					let row = this.bookList.find((v) => v.id === id);
					this.selectList.push(row);
					this.borrowNum++;

					if (this.borrowNum >= 3) {
						this.bookList.forEach((item) => {
							if (!this.selectList.some((selected) => selected.id === item.id)) {
								item.disabled = true;
								item.checked = false;
							} else {
								item.disabled = false;
							}
						});
					}
				} else {
					this.borrowNum--;
					let removedBook = this.selectList.splice(oldIndex, 1)[0];
					removedBook.disabled = false;
					this.bookList.find((book) => book.id === removedBook.id).checked = false;
					this.bookList.forEach((item) => {
						if (this.selectList.length < 3) {
							item.disabled = false;
						}
					});
				}
				console.log('图书数据', this.selectList)
			},

			handleChangeBook() {
				uni.switchTab({
					url: '/pages/classification/index'
				});
			},

			changeBookDetail(row) {
				uni.navigateTo({
					url: `/book/book-detail/index?bookId=${row}`
				});
			},

			changeGoodsDetail(row) {
				uni.navigateTo({
					url: `/goods/goods-detail/index?goodsId=${row}`
				});
			},

			handleCheckout() {
				if (this.constant === '2') {
					if (this.selectList.length < 1) {
						uni.showToast({
							title: '请选择需要借阅的图书！',
							icon: 'none'
						});
						return false
					}
					this.show = true;
				} else {
					if (this.selectList.length < 1) {
						uni.showToast({
							title: '请选择需要购买的商品！',
							icon: 'none'
						});
						return false
					}
					this.show = true;
				}
			},

			delBook(id) {
				this.bookId = id;
				this.show6 = true;
			},

			async confirmremoveBookShelf() {
				const res = await removeBookShelf('2', this.bookId);
				if (res.code == 200) {
					uni.showToast({
						title: '移除成功',
						icon: 'success'
					});
					this.show6 = false;
					this.getList();
				}
			},

			cancelShow6() {
				this.show6 = false;
			},

			TurnOff() {
				this.show = false;
			},

			confirmOrder(type) {
				console.log('select', this.selectList)
				if (this.constant === '1') {
					this.orderInfo.type = type
					this.orderInfo.buyNum = 0
					this.orderInfo.goodsList = []
					this.orderInfo.goodsList = this.selectList
					let data = this.orderInfo
					console.log('提交信息', data)
					uni.navigateTo({
						url: `/order/goodsOrder/index?data=${encodeURIComponent(JSON.stringify(data))}`
					});
				} else {
					this.orderInfo.type = type;
					this.orderInfo.bookList = this.selectList;
					const data = this.orderInfo;
					uni.navigateTo({
						url: `/order/bookOrder/index?data=${encodeURIComponent(JSON.stringify(data))}`
					});
				}
			},

			async changeBuyNum(e) {
				this.loading = true
				const res = await updateShoppingBuyNum(e);
				if (res.code === 200) {
					let totalPrice = 0;
					this.goodsList.forEach((item) => {
						totalPrice += item.price * item.buyNum;
					});
					this.totalPrice = totalPrice.toFixed(2);
				}
				this.loading = false
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		height: 100vh;
		width: 100%;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		overflow: hidden;
	}

	/* 弹窗样式 */
	.popup-container {
		padding: 30rpx;
		background: #fff;
	}

	.popup-title {
		display: block;
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 40rpx;
	}

	.popup-options {
		margin-bottom: 30rpx;
	}

	.popup-option {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background: #f8f9fa;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		transition: all 0.3s ease;

		&:active {
			background: #e9ecef;
			transform: scale(0.98);
		}
	}

	.option-text {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
	}

	.popup-cancel {
		padding: 24rpx;
		text-align: center;
		background: #f8f9fa;
		border-radius: 16rpx;
		transition: all 0.3s ease;

		&:active {
			background: #e9ecef;
		}
	}

	.cancel-text {
		font-size: 28rpx;
		color: #666;
	}

	/* 编辑头部 */
	.edit-header {
		position: fixed;
		top: 20rpx;
		right: 30rpx;
		z-index: 100;
	}

	.edit-btn-container {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		border-radius: 50rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.15);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
		}
	}

	.edit-btn-text {
		font-size: 26rpx;
		color: #007AFF;
		margin-left: 8rpx;
		font-weight: 500;
	}

	/* 内容区域 */
	.content {
		width: 100%;
		height: calc(100vh - 120rpx);
		overflow-y: auto;
		// padding: 100rpx 10rpx 140rpx 30rpx;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 70vh;
		text-align: center;
	}

	.empty-image {
		width: 300rpx;
		height: 300rpx;
		opacity: 0.8;
	}

	.empty-title {
		font-size: 32rpx;
		color: #666;
		margin-top: 40rpx;
		font-weight: 500;
	}

	.empty-desc {
		font-size: 26rpx;
		color: #999;
		margin-top: 16rpx;
		margin-bottom: 60rpx;
	}

	.shopping-btn {
		width: 200rpx;
		height: 70rpx;
		font-weight: 500;
		box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.3);
	}

	/* 商品列表 */
	.goods-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.goods-item {
		position: relative;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;
		overflow: hidden;

		&:active {
			transform: translateY(-4rpx);
			box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
		}

		&.edit-mode {
			border: 2rpx solid transparent;

			&:has(.edit-indicator) {
				border-color: #52c41a;
				background: linear-gradient(135deg, #fff, #f6ffed);
			}
		}
	}

	.goods-content {
		display: flex;
		align-items: center;
		padding: 30rpx;
	}

	.checkbox-container {
		flex-shrink: 0;
	}

	.goods-image-container {
		position: relative;
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.goods-image {
		width: 100%;
		height: 100%;
	}

	.goods-image-placeholder {
		width: 100%;
		height: 100%;
		background: #f8f9fa;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #ccc;
	}

	.placeholder-text {
		font-size: 22rpx;
		margin-top: 8rpx;
	}

	.quantity-badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		background: linear-gradient(135deg, #ff6b6b, #ee5a52);
		color: white;
		border-radius: 20rpx;
		padding: 4rpx 12rpx;
		font-size: 20rpx;
		font-weight: 600;
	}

	.goods-info {
		flex: 1;
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 140rpx;
	}

	.goods-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.goods-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.goods-price {
		font-size: 32rpx;
		font-weight: 600;
		color: #ff6b6b;
	}

	.edit-indicator {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	/* 借阅统计 */
	.borrow-stats {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.3);
	}

	.stats-content {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24rpx;
	}

	.stats-text {
		color: #fff;
		font-size: 26rpx;
		font-weight: 500;
		margin-left: 12rpx;
	}

	/* 图书列表 */
	.book-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.book-item {
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;

		&:active {
			transform: translateY(-4rpx);
			box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
		}
	}

	.book-content {
		display: flex;
		align-items: center;
		padding: 30rpx;
	}

	.book-cover-container {
		flex-shrink: 0;
	}

	.book-cover-placeholder {
		width: 140rpx;
		height: 180rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #999;
	}

	.book-info {
		flex: 1;
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
	}

	.book-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 16rpx;
		line-height: 1.4;
	}

	.book-author,
	.book-press {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.book-actions {
		flex-shrink: 0;
		margin-left: 20rpx;
	}

	/* 底部操作栏 */
	.footer-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20px);
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);

		&.edit-mode {
			background: rgba(255, 255, 255, 0.98);
		}
	}

	.footer-left {
		display: flex;
		align-items: center;
	}

	.total-label {
		font-size: 26rpx;
		color: #666;
	}

	.total-price {
		font-size: 36rpx;
		font-weight: 700;
		color: #ff6b6b;
		margin-left: 8rpx;
	}

	.selected-count {
		font-size: 26rpx;
		color: #666;
		font-weight: 500;
	}

	.footer-right {
		::v-deep .u-button {
			width: 240rpx;
			height: 80rpx;
			font-weight: 600;
			box-shadow: 0 8rpx 25rpx rgba(255, 107, 107, 0.3);
		}
	}
</style>